<template>
  <div id="app">
    <div id="canvas" style="position: relative; height: 400px; border: 1px solid #ccc;">
      <!-- 节点 -->
      <div
          v-for="node in nodes"
          :key="node.id"
          :id="'node-' + node.id"
          :style="getNodeStyle(node)"
          class="node">

        <!-- 节点名称 -->
        {{ node.name }}

        <!-- 日期显示在节点下方 -->
        <div class="date">{{ node.date }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from 'jsplumb'

export default {
  data() {
    return {
      nodes: [
        {id: 1, name: 'Start', x: 100, y: 100, color: '#4CAF50', date: ''},
        {id: 2, name: 'Process A', x: 300, y: 100, color: '#FFEB3B', date: ''},
        {id: 3, name: 'Process B', x: 500, y: 100, color: '#2196F3', date: ''},
        {id: 4, name: 'End', x: 700, y: 100, color: '#F44336', date: ''},
        {id: 5, name: '最后', x: 700, y: 200, color: '#9C27B0', date: ''},
      ],
      connections: [
        {source: 1, target: 2},
        {source: 2, target: 3},
        {source: 3, target: 4},
        {source: 4, target: 5},
      ],
    };
  },
  mounted() {
    this.initializeJsPlumb();
    this.startUpdatingDate();
  },
  methods: {
    initializeJsPlumb() {
      const instance = jsPlumb.getInstance({
        Connector: ['Straight'],
        PaintStyle: {stroke: '#000', strokeWidth: 2},
        Endpoint: ['Blank', {}], // 设置为空白端点
        Anchor: 'Continuous',
        Overlays: [
          // 添加箭头
          ['Arrow', {location: 1, width: 10, length: 20, foldback: 0.8}],
        ],
      });

      // 创建连接
      this.connections.forEach(connection => {
        instance.connect({
          source: `node-${connection.source}`,
          target: `node-${connection.target}`,
        });
      });

      // 设置节点可拖动
      this.nodes.forEach(node => {
        instance.draggable(`node-${node.id}`);
      });
    },
    startUpdatingDate() {
      // 每秒更新一次日期
      setInterval(() => {
        const currentDate = new Date().toLocaleDateString(); // 获取当前日期
        this.nodes.forEach(node => {
          node.date = currentDate; // 更新每个节点的日期
        });
      }, 1000); // 每秒更新一次
    },
    getNodeStyle(node) {
      return {
        position: 'absolute',
        left: `${node.x}px`,
        top: `${node.y}px`,
        width: '100px',
        height: '50px',
        backgroundColor: node.color,  // 使用节点的颜色属性
        color: 'white',
        textAlign: 'center',
        lineHeight: '50px',
        borderRadius: '5px',
        cursor: 'move',
      };
    },
  },
};
</script>

<style scoped>
.node {
  display: inline-block;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  cursor: move;
  position: absolute;
}

.date {
  margin-top: 5px;
  font-size: 12px;
  color: green;  /* 绿色日期 */
}

#canvas {
  position: relative;
  height: 400px;
  border: 1px solid #ccc;
}
</style>
